<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>土了个丘</title>
    <link rel="stylesheet" href="source/css/bootstrap.css">
    <script src="source/js/vue.js"></script>
    <script src="source/js/jq.js"></script>
    <script src="source/js/ew.js"></script>
    <style>
        * {
            user-select: none;
        }

        .column-start-start {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
        }

        .column-center-center {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .column-between-start {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
        }

        .column-between-center {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
        }

        .column-start-center {
            display: flex;
            flex-direction: column;
            justify-content: start;
            align-items: center;
        }

        .row-start-center {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
        }

        .row-start-start {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: flex-start;
        }

        .row-around-center {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
        }

        .row-center-center {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        .row-between-center {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }

        .bggreen {
            background: green;
        }

        .bgblue {
            background: blue;
        }

        .bgyellor {
            background: yellow;
        }

        .bgorange {
            background: orange;
        }

        .bgred {
            background: red;
        }

        .bgwhite {
            background: white;
        }

        .transition-duration {
            transition-duration: 16ms;
        }

        .imageWmax {
            width: 90px;
            height: auto;
        }

        .imageHmax {
            height: 90px;
            width: auto;
        }

        #floatline {
            position: absolute;
            width: 60px;
            margin-left: -30px;
        }

        .redpoint {
            z-index: 5000;
            width: 6px;
            height: 6px;
            position: absolute;
            left: 0;
            top: 0;
            margin-left: -3px;
            margin-top: -3px;
            background: red;
            border-radius: 50%;
        }

        /*---滚动条默认显示样式--*/
        ::-webkit-scrollbar-thumb {
            background-color: gainsboro;
            height: 50px;
            outline-offset: -2px;
            outline: 2px solid rgba(255, 255, 255, 0);
            border-radius: 4px;
        }

        /*---鼠标点击滚动条显示样式--*/
        ::-webkit-scrollbar-thumb:hover {
            background-color: gray;
            height: 50px;
        }

        /*---滚动条大小--*/
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        /*---滚动框背景样式--*/
        ::-webkit-scrollbar-track-piece {
            background-color: rgba(255, 255, 255, 0);
        }

        @keyframes loading {
            0% {
                width: 30px;
                height: 30px;
                background: #fd7e14;
            }

            16% {
                width: 40px;
                height: 40px;
            }

            33% {
                width: 50px;
                height: 50px;
            }

            50% {
                width: 60px;
                height: 60px;
                background: #28a745;
            }

            66% {
                width: 50px;
                height: 50px;
            }

            83% {
                width: 40px;
                height: 40px;
            }

            100% {
                width: 30px;
                height: 30px;
                background: #fd7e14;
            }
        }

        @keyframes loading1 {
            0% {
                width: 40px;
                height: 40px;
                background: #28a745;
            }

            16% {
                width: 50px;
                height: 50px;
            }

            33% {
                width: 60px;
                height: 60px;

            }

            50% {
                width: 50px;
                height: 50px;
                background: #ffc107;
            }

            66% {
                width: 40px;
                height: 40px;

            }

            83% {
                width: 30px;
                height: 30px;

            }

            100% {
                width: 40px;
                height: 40px;
                background: #28a745;
            }
        }

        @keyframes loading2 {
            0% {
                width: 50px;
                height: 50px;
                background: #ffc107;
            }

            16% {
                width: 60px;
                height: 60px;
            }

            33% {
                width: 50px;
                height: 50px;
            }

            50% {
                width: 40px;
                height: 40px;
                background: #28a745;
            }

            66% {
                width: 30px;
                height: 30px;
            }

            83% {
                width: 40px;
                height: 40px;
            }

            100% {
                width: 50px;
                height: 50px;
                background: #ffc107;
            }
        }
    </style>
</head>

<body>
    <div id="loading" class="row-center-center"
        style="position: fixed;opacity: 1;z-index: 99999;width: 100%;height: 100%;">
        <div class="row-between-center" style="width: 190px;">
            <div class="row-center-center" style="width: 60px;height: 60px;">
                <div
                    style="width: 30px;height: 30px;border-radius: 50%;background: #fd7e14;animation-name: loading;animation-duration: 0.5s;animation-delay: -40s; animation-timing-function: linear;animation-iteration-count: infinite;animation-play-state: running;animation-direction: normal;">
                </div>
            </div>
            <div class="row-center-center" style="width: 60px;height: 60px;">
                <div
                    style="width: 30px;height: 30px;border-radius: 50%;background: #ffc107;animation-name: loading1;animation-duration: 0.5s;animation-delay: -40s; animation-timing-function: linear;animation-iteration-count: infinite;animation-play-state: running;animation-direction: normal;">
                </div>
            </div>
            <div class="row-center-center" style="width: 60px;height: 60px;">
                <div
                    style="width: 30px;height: 30px;border-radius: 50%;background: #28a745;animation-name: loading2;animation-duration: 0.5s;animation-delay: -40s; animation-timing-function: linear;animation-iteration-count: infinite;animation-play-state: running;animation-direction: normal;">
                </div>
            </div>
        </div>
    </div>
    <div id="main" style="opacity: 0;width: 100%;height: 100%;">
        <img id="priviewimage" alt="加载失败" class="bggreen"
            style="position: fixed;top: 30px;left: 280px;z-index: -1;background:url(source/img/placeload.png);border:1px solid gray;border-radius: 5px;">
        <div onmousemove="gloabmove(event)" onmousedown="gloabdown()" onmouseup="gloabup()" id="app"
            class="column-start-start" style="position: fixed;left: 0;top: 0;width: 100%;height: 100%;">
            <div class="w-100" style="position: absolute;left: 0;top: 0;bottom: 60px;">
                <div class="column-start-start"
                    style="position: absolute;left: 0;top: 0;bottom: 30px;width: 250px;overflow-y: scroll; border-right: 1px solid gainsboro;">
                    <div class="column-start-start w-100" v-for="item in filelist">
                        <div class="row-start-center w-100" @click="item.isbible=!item.isbible">
                            <svg style="margin-left: 5px;" t="1594784260015" class="icon" viewBox="0 0 1180 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4141" width="21">
                                <path
                                    d="M1099.433546 289.842983h-1.08787v-99.462424a128.679511 128.679511 0 0 0-93.246023-126.65918v-3.263611A60.454505 60.454505 0 0 0 944.023508 0.003264H729.246837A60.454505 60.454505 0 0 0 668.326102 59.836128H122.526051A126.65918 126.65918 0 0 0 0.062941 190.380559V890.502778a12.277393 12.277393 0 0 0 2.331151 6.216401v1.243281c0 72.110257 46.623011 126.03754 113.760147 126.03754H969.821575c67.603366 0 105.212595-68.225006 122.463109-130.544431L1174.652004 419.610365c18.182974-75.063048-7.459682-129.767381-75.218458-129.767382z m-897.337556 0a160.072339 160.072339 0 0 0-132.253942 78.637479v-124.32803a73.198128 73.198128 0 0 1 46.623011-54.859743H668.326102a60.609915 60.609915 0 0 1 60.454505-59.988274h215.242901a60.609915 60.609915 0 0 1 60.454505 60.609914v3.108201a126.50377 126.50377 0 0 1 90.604052 97.908324z"
                                    fill="#ffcc66" p-id="4142"></path>
                            </svg>
                            <span style="margin-left: 10px;">{{item.name}}</span>
                        </div>
                        <div class="w-100" v-if="item.isbible">
                            <div v-for="iitem in item.images" class="row-start-center w-100"
                                style="height: 90px;border-bottom: 1px solid gainsboro; position: relative;">
                                <div class="column-center-center"
                                    style="height: 80px;width: 80px; vertical-align: middle;margin-left: 10px; pointer-events: none;">
                                    <img v-if="parseInt(iitem.width)>iitem.height"
                                        style="width: 100%; pointer-events: none;" :src="iitem.src" alt="加载失败">
                                    <img v-else style="height: 100%; pointer-events: none;" :src="iitem.src" alt="加载失败">
                                </div>
                                <span style="margin-left: 10px;">{{iitem.name}}</span>
                                <div @mouseover="listimagehoverin(iitem.src)" @mouseout="listimagehoverout"
                                    @click="selectimagefile(iitem)" class=""
                                    style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row-center-center" onclick="showInFileMarnerge()"
                    style="position: absolute;left: 0;bottom: 0;width: 250px; height: 30px;border-right: 1px solid gainsboro;cursor: pointer;">
                    <svg t="1595476587591" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="10624" width="16" height="16">
                        <path
                            d="M463.928889 90.453333a50.915556 50.915556 0 0 0-50.915556-50.915555H178.346667A138.524444 138.524444 0 0 0 79.644444 79.075556a135.111111 135.111111 0 0 0-40.106666 97.564444V847.644444a135.964444 135.964444 0 0 0 40.106666 97.564445 139.946667 139.946667 0 0 0 98.702223 39.253333h680.106666c75.377778 0 126.008889-54.044444 126.008889-134.826666v-277.333334a50.915556 50.915556 0 0 0-50.631111-50.915555A50.915556 50.915556 0 0 0 881.777778 572.302222v277.048889a36.124444 36.124444 0 0 1-33.848889 33.848889H175.217778A36.124444 36.124444 0 0 1 142.222222 849.066667V175.217778A36.124444 36.124444 0 0 1 175.217778 142.222222h237.795555a50.915556 50.915556 0 0 0 50.915556-50.631111z"
                            fill="#ffcc66" p-id="10625"></path>
                        <path
                            d="M660.195556 142.222222h145.635555L488.106667 461.937778a52.337778 52.337778 0 0 0 0 73.102222 51.484444 51.484444 0 0 0 36.408889 15.075556 50.062222 50.062222 0 0 0 36.124444-14.791112L881.777778 213.333333v150.471111a51.484444 51.484444 0 0 0 102.968889 0V92.16A52.337778 52.337778 0 0 0 967.111111 54.613333a50.915556 50.915556 0 0 0-36.408889-15.075555h-270.506666a51.768889 51.768889 0 0 0 0 103.253333z"
                            fill="#ffcc66" p-id="10626"></path>
                    </svg>
                    <span style="margin-left: 10px;color: #44658a;">在资源管理器中显示项目</span>
                </div>
                <div id="right" class="bgorange"
                    style="position: absolute;left: 250px;top: 0;right: 280px;height: 100%;">
                    <div id="right-top" class=""
                        style="overflow: hidden; position: absolute;left: 0;top: 0;right: 0;bottom: 250px;background: rgb(184, 182, 182);">
                        <div
                            style="position: absolute;left: 0;top: 0;height: 80%;width: 50%;border-right: 1px solid gray;border-bottom: 1px solid gray;margin-left: 1px;margin-top: 1px;">
                        </div>
                        <div id="ancontorl"
                            style="position: absolute;left: 50%;top: 80%;bottom: 0;right: 0;border-left: 1px solid gray;border-top: 1px solid red;zoom: 1;">
                            <!--  -->
                            <img v-for="item in curreElenmets" :src="item.image.src"
                                :alt="showUnloadPicture?'':item.image.name"
                                :style="'background:'+(item.image.active?backgroundColor:'none')+';'+(item.active?('background:'+backgroundColor+';'):';')+'margin-left:-'+item.image.povit_xx+'px; margin-top:-'+item.image.povit_yy+'px; transform-origin:'+item.image.povit_xx+'px '+item.image.povit_yy+'px; position: absolute;transform: matrix('+item.m_a+','+item.m_b+','+item.m_c+','+item.m_d+','+item.m_tx+','+item.m_ty+');z-index:'+item.z_index+';'+(item.active?'z-index:6000;':'')">
                            <div v-for="item in curreElenmets" class="redpoint"
                                :style="'opacity: '+(item.image.activepoint?1:0)+';transform: matrix(1,0,0,1,'+item.m_tx+','+item.m_ty+');'+(item.active?'opacity:1;':';')+(showAllPoint?'opacity:1;':';')+(item.active?'z-index:6001;':'')">
                            </div>
                        </div>
                        <div class="" onmousedown="centerdown(event)" onmousemove="centermove(event)"
                            onmouseup="centerDownpoint.isdown=false" onmousewheel="onmousescoll(event)"
                            :style="'z-index: 7000; position: absolute;left: 50%;top: 80%;width: 1400px;height: 1400px;margin-left: -700px;margin-top: -700px;cursor: all-scroll;transform: matrix('+curreElenmet.m_a+','+curreElenmet.m_b+','+curreElenmet.m_c+','+curreElenmet.m_d+',0,0);'">
                        </div>
                        <div class="alert alert-danger alert-dismissible fade show"
                            :style="'opacity: '+(error?1:0)+'; position: absolute;left: 50%;top: 10%;width: 400px;margin-left: -200px; z-index: 7002;transition-duration: 0.3s;'">
                            <button onclick="app.error=''" type="button" class="close"
                                data-dismiss="alert">&times;</button>
                            <strong>错误!</strong>
                            <pre>{{error}}</pre>
                        </div>
                    </div>
                    <div class="row-start-start bgwhite" id="right-bottom" class="bgwhite"
                        style="position: absolute;left: 0;right: 0;bottom: 0;height: 250px; overflow-x: scroll;overflow-y: hidden;">
                        <div class="column-center-center" id="redpoint"
                            style="min-width: 225px; position: relative; height: 225px;width: 225px;box-shadow:rgba(0, 0, 0, 0.07) 0px 0px 9px 4px;margin-left: 8px;height: 225px;margin-top: 8px;border-radius: 3px;background: url(source/img/placeload.png);">
                            <img style="width: 100%;" v-if="parseInt(curreImageItem.width)>curreImageItem.height"
                                :src="curreImageItem.src" alt="加载失败">
                            <img style="height: 100%;" v-else :src="curreImageItem.src" alt="加载失败">
                            <div v-if="parseInt(curreImageItem.width)>curreImageItem.height"
                                :style="'border-radius: 50%; width: 6px;height: 6px;position: absolute;right: '+curreImageItem.povit_x*225/curreImageItem.width+'px;bottom: '+curreImageItem.povit_y*225/curreImageItem.width+'px;background: red;margin-right: 109.5px; margin-bottom: 109.5px;'">
                            </div>
                            <div v-else
                                :style="'border-radius: 50%; width: 6px;height: 6px;position: absolute;right: '+curreImageItem.povit_x*225/curreImageItem.height+'px;bottom: '+curreImageItem.povit_y*225/curreImageItem.height+'px;background: red;margin-right: 109.5px; margin-bottom: 109.5px;'">
                            </div>
                            <div onmousedown="offsetfn(event)" onmousemove="offsetmovefu(event)"
                                onmouseup="setpointdowns=false" class=""
                                style="position: absolute;left: 0;top: 0; width: 100%;height: 100%;">
                            </div>
                        </div>
                        <div class=" column-between-center"
                            style="width: 138px; min-width: 138px; margin-left: 5px;height: 225px;margin-top: 8px;">
                            <div class="column-start-center"
                                style="height: 81px; width: 100%;border-radius:3px;box-shadow:rgba(0, 0, 0, 0.07) 0px 0px 9px 4px;">
                                <div class="row-between-center" style="width: 86%;margin-top: 8px;">
                                    <span>X偏移量</span>
                                    <button onclick="restorepovitx()"
                                        style=" background: none;border: 1px solid gainsboro;border-radius: 3px;">还原</button>
                                </div>
                                <input id="inputx"
                                    style="margin-top: 8px; border-radius: 3px; width: 86%; border: 1px solid gainsboro;"
                                    type="number" :value="curreImageItem.povit_x">
                            </div>
                            <div class="column-start-center"
                                style="height: 81px; width: 100%;border-radius:3px;box-shadow:rgba(0, 0, 0, 0.07) 0px 0px 9px 4px;">
                                <div class="row-between-center" style="width: 86%;margin-top: 8px; ">
                                    <span>Y偏移量</span>
                                    <button onclick="restorepovity()"
                                        style="background: none;border: 1px solid gainsboro;border-radius: 3px;">还原</button>
                                </div>
                                <input id="inputy"
                                    style="margin-top: 8px; border-radius: 3px; width: 86%; border: 1px solid gainsboro;"
                                    type="number" :value="curreImageItem.povit_y">
                            </div>
                            <button onclick="resotrallpoint()" class="btn btn-dark">还原初始偏移量</button>
                        </div>
                        <div class="bgwhite"
                            style="height: 90%;width: 298px;box-shadow:rgba(0, 0, 0, 0.07) 0px 0px 9px 4px;margin-left: 8px;height: 225px;margin-top: 8px;border-radius: 3px;">
                            <div class="column-start-start" style="min-width: 298px;">
                                <div class="w-100 row-start-start">
                                    <div id="colorpanl" class="bgred"
                                        style="margin-top: 8px;margin-left: 8px; width: 250px;height: 170px;position: relative;">
                                        <div
                                            style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;background:linear-gradient(0deg, #000, transparent);">
                                        </div>
                                        <div
                                            style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: linear-gradient(90deg, #fff, hsla(0, 0%, 100%, 0));">
                                        </div>
                                        <div id="colorpanlpoint"
                                            style="color: white;border-radius: 50%;width: 12px;height: 12px;border: 3px solid white;position: absolute;left:250px;top:0;margin-left: 0;margin-top: 0;margin-left: -6px;margin-top: -6px;">
                                        </div>
                                        <div onmousedown="colorpanldown(event)" onmousemove="colorpanlmove(event)"
                                            onmouseup="colorpanlup()"
                                            style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;border:1px solid #80808021">
                                        </div>
                                    </div>

                                    <div class=""
                                        style="margin-top: 8px;margin-left: 8px; width: 10px;height: 170px;position: relative;background: url(source/img/placeload.png);">
                                        <div id="aphapanl"
                                            style="background: linear-gradient(to top, rgba(255, 0, 225, 0) 0%, rgb(255, 0, 0) 100%);position: absolute;left: 0;top: 0;width: 100%;height: 100%;">
                                        </div>
                                        <div id="aphacontrl"
                                            style="border: 1px solid gainsboro;border-radius: 2px;width: 12px;height: 6px;background: white;position: absolute;left: 0px;top: 85px;margin-top:-3px;margin-left: -1px;">
                                        </div>
                                        <div onmousedown="coloraphadownfn(this)"
                                            style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;"></div>
                                    </div>
                                    <div
                                        style="position: relative; margin-left: 4px;margin-top: 8px;width: 10px;height: 170px;background: linear-gradient(180deg, #f00 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00);">
                                        <div id="clolrselect"
                                            style="border: 1px solid gainsboro;border-radius: 2px;width: 12px;height: 6px;background: white;position: absolute;left: 0px;top: 0px;margin-top:-3px;margin-left: -1px;">
                                        </div>
                                        <div style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;"
                                            onmousedown="colorcontrldown(this)"></div>
                                    </div>
                                </div>
                                <div class="row-between-center w-100" style="margin-top: 12px;">
                                    <div class="row-start-center">

                                        <div @click="selectprecolor(item)" v-for="item in colorlist"
                                            :style="'width: 25px;height: 25px;border: 1px solid gainsboro;border-radius: 6px;background: '+item+';margin-left: 7px;'">
                                        </div>
                                    </div>
                                    <button onclick="app.backgroundColor='#84848470'"
                                        style="background: none;color: gray;font-size: 14px;margin-right: 7px;border: none;padding: 0;">默认</button>
                                </div>
                            </div>
                        </div>
                        <div id="noname1" class="bgwhite row-start-start"
                            style="height: 225px;box-shadow: rgba(0, 0, 0, 0.07) 0px 0px 9px 4px;margin-left: 8px;margin-top: 8px;">
                            <div class="column-between-start" style="margin-left: 4px;height: 100%;">
                                <div class="row-center-center"
                                    style="width: 180px;height: 34px;border: 1px solid gainsboro;border-radius: 4px;margin-top: 4px;">
                                    <div class="form-check">
                                        <label class="form-check-label">
                                            <input onclick="showUnloadPicture()" v-if="showUnloadPicture"
                                                type="checkbox" class="form-check-input" checked>
                                            <input onclick="showUnloadPicture()" v-else type="checkbox"
                                                class="form-check-input">
                                            不显示未加载的图片
                                        </label>
                                    </div>
                                </div>
                                <div class="row-center-center"
                                    style="width: 180px;height: 34px;border: 1px solid gainsboro;border-radius: 4px;">
                                    <div class="form-check">
                                        <label class="form-check-label">
                                            <input onclick="showAllPointfn()" v-if="showAllPoint" type="checkbox"
                                                class="form-check-input" checked>
                                            <input onclick="showAllPointfn()" v-else type="checkbox"
                                                class="form-check-input">
                                            显示所有红点
                                        </label>
                                    </div>
                                </div>

                                <div class="row-center-center"
                                    style="width: 180px;height: 34px;border: 1px solid gainsboro;border-radius: 4px;">
                                    <svg t="1596375645811" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="2894" width="16" height="16">
                                        <path
                                            d="M275.84 160H124.192l1.824 580.096a32 32 0 0 1-64 0L60.16 160a64 64 0 0 1 64-64h177.92l97.28 96h498.272a32 32 0 1 1 0 64h-524.48l-97.28-96zM127.52 735.616a32 32 0 0 1-63.04-10.944l54.624-314.144c8.8-50.592 55.68-90.528 106.656-90.528h668.864c55.36 0 93.92 46.72 84.384 101.472l-72.32 416C897.824 888.064 850.976 928 800 928H160a32 32 0 0 1 0-64h640c19.712 0 40.096-17.376 43.616-37.472l72.32-416C918.72 394.624 909.952 384 894.624 384H225.76c-19.68 0-40.096 17.376-43.584 37.472L127.52 735.616z"
                                            p-id="2895"></path>
                                    </svg>
                                    <span style="margin-left: 10px;" onclick="openThisPng()">打开当前图片</span>
                                </div>
                                <div class="row-center-center"
                                    style="width: 180px;height: 34px;border: 1px solid gainsboro;border-radius: 4px;">
                                    <svg t="1596375578261" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="2042" width="16" height="16">
                                        <path
                                            d="M633.417143 83.382857c118.491429 11.849143 213.796571 83.382857 234.057143 205.385143h-68.534857l110.738285 164.864 110.738286-164.864H944.274286C924.013714 124.342857 798.939429 17.261714 641.170286 1.755429c-21.942857-1.755429-42.276571 17.261714-42.276572 41.106285 1.828571 20.260571 16.091429 38.765714 34.523429 40.521143zM461.970286 0H76.8C54.784 0 38.034286 18.432 38.034286 42.276571V409.6c0 23.844571 17.334857 42.276571 38.765714 42.276571h385.170286c22.016 0 38.765714-18.432 38.765714-42.276571V42.861714C500.662857 19.017143 483.913143 0 461.897143 0zM386.998857 935.277714c-132.754286-11.922286-234.057143-100.571429-238.738286-246.491428h73.142858L110.811429 523.922286 0 688.786286h73.216c2.925714 188.708571 135.753143 311.369143 306.029714 328.045714 22.016 1.828571 42.276571-17.261714 42.276572-41.033143a40.448 40.448 0 0 0-34.523429-40.521143z m558.445714-369.078857c20.187429 0 38.692571 19.017143 38.692572 42.276572v369.078857c0 23.844571-17.261714 42.276571-38.765714 42.276571H560.274286c-21.942857 0-38.692571-18.432-38.692572-42.276571V608.548571c0-23.844571 17.261714-42.276571 38.765715-42.276571h385.170285z m-57.197714 68.461714H616.813714c-15.506286 0-27.428571 13.092571-27.428571 29.769143v260.169143c0 16.676571 11.922286 29.769143 27.428571 29.769143h271.433143c15.506286 0 27.428571-13.165714 27.428572-29.769143V664.429714a28.306286 28.306286 0 0 0-27.428572-29.769143zM405.430857 67.291429c14.262857 0 27.355429 13.092571 27.355429 29.769142v260.169143c0 16.676571-11.849143 29.769143-27.355429 29.769143h-272.091428c-15.433143 0-27.355429-13.165714-27.355429-29.769143v-259.657143c0-16.603429 11.922286-29.696 27.355429-29.696 0-0.585143 272.091429-0.585143 272.091428-0.585142z"
                                            fill="#666666" p-id="2043"></path>
                                    </svg>
                                    <span style="margin-left: 10px;" onclick="replaceCurrentPicture()">替换当前图片</span>
                                </div>
                                <div class="row-center-center"
                                    style="width: 180px;height: 34px;border: 1px solid gainsboro;border-radius: 4px;margin-bottom: 4px;">
                                    <svg t="1596375723412" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="3749" width="16" height="16">
                                        <path
                                            d="M795.235 721.811l134.263-232.554h-94.924c-12.647-192.246-172.319-344.515-367.782-344.515-203.748 0-368.534 165.178-368.534 368.949 0 203.675 165.168 368.886 368.914 368.886 91.418 0 174.883-33.46 239.33-88.519l-49.33-63.553c-50.797 44.522-117.138 71.755-190 71.755-159.372 0-288.595-129.253-288.595-288.57 0-159.412 129.223-288.631 288.595-288.631 151.124 0 274.566 116.277 287.013 264.197h-93.211l134.261 232.555z"
                                            fill="" p-id="3750"></path>
                                    </svg>
                                    <span style="margin-left: 10px;" onclick="reloadCurrentPicture()">重载当前图片</span>
                                </div>
                            </div>
                            <div class="column-start-start" style="margin-left: 4px;min-width: 100px;">
                                <span style="height: 10px;"></span>
                                <span onclick="savebuild()">保存工程</span>
                                <span onclick="compilation()">编译项目</span>
                                <span onclick="app.error='努力开发中'">旋转图片工具</span>
                            </div>
                        </div>
                    </div>
                    <span class=""
                        style="position: absolute;top: 0;right: 0;width: 45px;color: red;">{{currfps}}fps</span>
                </div>
                <div id="rightbar" class="column-start-start"
                    style="position: absolute;top: 0;bottom: 0;right: 0;width: 280px;border-left: 1px solid gainsboro;">
                    <div class="column-start-start"
                        style="height: 50%;width: 100%;overflow-y: scroll;overflow-x: hidden;">
                        <div class="w-100" v-for="item in curreElenmets" v-if="item.image.src"
                            style="border-bottom: 1px solid gainsboro;position: relative;">
                            <div class="w-100 row-start-center" style="height: 110px;">
                                <img :class="parseInt(item.image.width)>item.image.height?'imageWmax':'imageHmax'"
                                    :style="'margin-left: 10px;transform-origin:0.5 0.5;transform:matrix('+item.m_a+','+item.m_b+','+item.m_c+','+item.m_d+',0,0);'"
                                    :src="item.image.src" alt="缺失！！">
                                <span style="margin-left: 10px;">{{item.image.name}}</span>
                            </div>
                            <div @click="selectElement(item)"
                                style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;">
                            </div>
                        </div>
                    </div>
                    <div class="column-start-start" style="height: 50%;width: 100%;border-top: 1px solid gainsboro;">
                        <div class="row-around-center w-100" style="height: 40px;margin-top: 5px;">
                            <div class="" style="width: 48%;height: 100%;">
                                <button onclick="loadBuiltinAn()" class="btn btn-dark w-100"
                                    style="height: 100%;">加载内置动画</button>
                            </div>
                            <div class="" style="width: 48%;height: 100%;">
                                <button onclick="loadExternalAn()" class="btn btn-dark w-100"
                                    style="height: 100%;">加载外部动画</button>
                            </div>
                        </div>
                        <div id="anlist" style="overflow-y: scroll; width: 100%;">
                            <div v-for="(item,index) in anlist" class="row-start-center w-100"
                                :style="'color:'+(item.active?'white':'black')+'; padding: 5px;background: '+ (item.active?'gray':'none')+';'"
                                @click="selectAn(index)">
                                <svg t="1594799179552" class="icon" viewBox="0 0 1104 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="6861" width="25">
                                    <path
                                        d="M590.913604 363.025721H372.501887L255.012193 509.752482l-68.003251-54.251002 143.694768-179.537247h260.209894v87.061488z"
                                        fill="#FFFFFF" p-id="6862"></path>
                                    <path
                                        d="M258.369042 540.288974l-101.788307-81.430646 163.619288-204.551181h270.713581v43.314173H341.099112L217.545434 452.036346l34.109911 27.287929 110.451141-137.955641h228.807118v43.314173H382.897289l-124.528247 155.606167z"
                                        fill="#282D33" p-id="6863"></path>
                                    <path
                                        d="M764.711723 221.496661A93.450328 93.450328 0 1 1 671.369681 128.046333a93.450328 93.450328 0 0 1 93.342042 93.450328z"
                                        fill="#FFFFFF" p-id="6864"></path>
                                    <path
                                        d="M671.369681 336.170934a115.107415 115.107415 0 1 1 114.999129-114.674273A115.2157 115.2157 0 0 1 671.369681 336.170934z m0-186.900657a71.793242 71.793242 0 1 0 71.684956 71.793242A71.793242 71.793242 0 0 0 671.369681 149.703419z"
                                        fill="#282D33" p-id="6865"></path>
                                    <path
                                        d="M214.946583 984.042675l-57.066423-65.729257 180.728387-156.797306 33.135342-178.346107 85.545492 15.917958-38.766185 208.232887-203.576613 176.721825z"
                                        fill="#FFFFFF" p-id="6866"></path>
                                    <path
                                        d="M212.780875 1014.579167l-85.437207-98.431458 191.340359-166.109853 35.734193-192.098357 128.101667 23.822795-44.072171 236.928526zM188.416652 920.912268l28.154213 32.48563 182.027812-157.555304 33.460198-179.428961-43.314173-8.013122-30.319921 164.485571z"
                                        fill="#282D33" p-id="6867"></path>
                                    <path
                                        d="M806.185044 594.215119v-86.628346h-153.765314V343.534343L590.480463 282.028217 405.528944 469.903443a130.592231 130.592231 0 0 0 0 184.085235l145.10248 145.102479-12.452825 196.429774 86.628346 5.522557 15.15996-235.195959-173.256692-173.256692a43.314173 43.314173 0 0 1 0-61.722696l99.622598-100.922023v164.269001z"
                                        fill="#FFFFFF" p-id="6868"></path>
                                    <path
                                        d="M645.272891 1024l-129.942518-8.229693 13.102537-207.799745L389.827557 669.798351a151.599605 151.599605 0 0 1 0-215.163154l200.436335-202.818615 83.812924 82.73007V485.60483h153.765314v129.942519h-282.624978V483.114265l-62.480695 63.346978a21.657086 21.657086 0 0 0-6.280555 15.809673 21.657086 21.657086 0 0 0 6.388841 15.376532l179.753818 179.862103zM561.135111 975.054985l43.314172 2.815421L617.226964 774.293793 451.766824 608.292225A64.213261 64.213261 0 0 1 433.141729 562.270916a64.971259 64.971259 0 0 1 19.274807-46.346165l136.114789-138.388782v194.913778h195.996632v-43.314173h-153.765313v-176.505255l-40.06561-39.524182-169.683273 172.065552a108.285432 108.285432 0 0 0 0 153.981884l151.599605 151.599606z"
                                        fill="#282D33" p-id="6869"></path>
                                    <path
                                        d="M973.919179 885.936074m-129.942519 0a129.942519 129.942519 0 1 0 259.885038 0 129.942519 129.942519 0 1 0-259.885038 0Z"
                                        fill="#F8C44F" p-id="6870"></path>
                                    <path
                                        d="M97.67346 594.864832h143.91134v43.314172H97.67346zM139.146781 686.907449h143.911339v43.314173H139.146781zM0 594.864832h56.524996v43.314172H0zM790.700227 836.666202h143.91134v43.314173H790.700227zM832.173548 928.70882h143.911339v43.314172H832.173548zM693.026767 836.666202h56.524996v43.314173H693.026767z"
                                        fill="#282D33" p-id="6871"></path>
                                    <path
                                        d="M409.535505 141.257155a29.886779 29.886779 0 0 0 0-5.522557 38.766185 38.766185 0 0 0-38.116472-38.441328 36.925332 36.925332 0 0 0-12.019683 2.165708 80.239505 80.239505 0 0 0-79.373222-68.544678 82.296929 82.296929 0 0 0-17.217384 2.057423A97.456889 97.456889 0 0 0 94.858039 75.203042a58.149277 58.149277 0 0 0-58.257563 58.149277 51.652151 51.652151 0 0 0 0.757998 8.229693z"
                                        fill="#34CA9D" p-id="6872"></path>
                                </svg>
                                <span style="margin-left: 10px;">{{item.name}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-100"
                style="position: absolute;left: 0;bottom: 0;height: 60px;border-top: 1px solid gainsboro;">
                <div class="bgwhite row-center-center"
                    style="position: absolute;left: 0;top: 0;bottom: 0;width: 250px;border-right: 1px solid gainsboro">
                    <div style="width: 73px;height: 38px;" class="column-between-start">
                        <span style="font-size: 14px;margin-top: -9px;">帧率(FPS)</span>
                        <input id="fpsid"
                            style="width: 80%;height: 27px; border-radius: 5px;border: 1px solid gainsboro;"
                            type="number" :value="fps">
                    </div>
                    <svg @click="lastframe" t="1594807170223" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="1551" width="32" height="32">
                        <path
                            d="M510.7 960.7c-247.1 0-448.1-201-448.1-448.1s201-448.1 448.1-448.1 448.1 201 448.1 448.1-201 448.1-448.1 448.1z m0-845.2c-219 0-397.1 178.1-397.1 397.1s178.1 397.1 397.1 397.1 397.1-178.1 397.1-397.1-178.2-397.1-397.1-397.1z"
                            fill="#707070" p-id="1552" data-spm-anchor-id="a313x.7781069.0.i3" class="selected"></path>
                        <path
                            d="M488.8 530c-6.6 0-13.2-2.6-18.2-7.7-9.9-10.1-9.7-26.2 0.4-36.1L610.1 350c10-9.9 26.2-9.7 36.1 0.4 9.9 10.1 9.7 26.2-0.4 36.1L506.7 522.8c-5 4.8-11.4 7.2-17.9 7.2z"
                            fill="#D8BA3D" p-id="1553"></path>
                        <path
                            d="M623.7 669.1c-6.7 0-13.3-2.6-18.3-7.7L470.5 522.3c-9.8-10.1-9.6-26.3 0.5-36.1s26.3-9.6 36.1 0.5L642 625.9c9.8 10.1 9.6 26.3-0.5 36.1-5 4.7-11.4 7.1-17.8 7.1zM400.3 667.7c-14.1 0-25.5-11.4-25.5-25.5V369.6c0-14.1 11.4-25.5 25.5-25.5s25.5 11.4 25.5 25.5v272.6c0 14.1-11.4 25.5-25.5 25.5z"
                            fill="#D8BA3D" p-id="1554"></path>
                    </svg>
                    <svg v-if="isPlay" t="1594806942303" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="8360" width="50" @click="play">
                        <path
                            d="M512 128c51.863704 0 102.115556 10.145185 149.428148 30.151111 45.700741 19.342222 86.755556 47.028148 122.026667 82.299259 35.271111 35.271111 62.957037 76.325926 82.299259 122.026667 20.100741 47.407407 30.245926 97.659259 30.245926 149.522963s-10.145185 102.115556-30.151111 149.428148c-19.342222 45.700741-47.028148 86.755556-82.299259 122.026667-35.271111 35.271111-76.325926 62.957037-122.026667 82.299259-47.407407 20.100741-97.659259 30.245926-149.522963 30.245926s-102.115556-10.145185-149.428148-30.151111c-45.700741-19.342222-86.755556-47.028148-122.026667-82.299259s-62.957037-76.325926-82.299259-122.026667c-20.100741-47.407407-30.245926-97.659259-30.245926-149.522963s10.145185-102.115556 30.151111-149.428148c19.342222-45.700741 47.028148-86.755556 82.299259-122.026667 35.271111-35.271111 76.325926-62.957037 122.026667-82.299259 47.407407-20.100741 97.659259-30.245926 149.522963-30.245926m0-42.666667C276.385185 85.333333 85.333333 276.385185 85.333333 512s191.051852 426.666667 426.666667 426.666667 426.666667-191.051852 426.666667-426.666667S747.614815 85.333333 512 85.333333z"
                            p-id="8361" fill="#707070"></path>
                        <path
                            d="M406.660741 722.962963c-11.757037 0-21.333333-9.576296-21.333334-21.333333V322.37037c0-11.757037 9.576296-21.333333 21.333334-21.333333s21.333333 9.576296 21.333333 21.333333v379.25926c0 11.757037-9.576296 21.333333-21.333333 21.333333zM617.339259 722.962963c-11.757037 0-21.333333-9.576296-21.333333-21.333333V322.37037c0-11.757037 9.576296-21.333333 21.333333-21.333333s21.333333 9.576296 21.333334 21.333333v379.25926c0 11.757037-9.576296 21.333333-21.333334 21.333333z"
                            p-id="8362" fill="#707070"></path>
                    </svg>
                    <svg v-else t="1594806878803" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="7837" width="50" @click="play">
                        <path
                            d="M512 947.2c-240.128 0-435.2-195.072-435.2-435.2s195.072-435.2 435.2-435.2 435.2 195.072 435.2 435.2-195.072 435.2-435.2 435.2z m0-828.928c-217.088 0-393.728 176.64-393.728 393.728s176.64 393.728 393.728 393.728 393.728-176.64 393.728-393.728-176.64-393.728-393.728-393.728z"
                            p-id="7838" fill="#707070"></path>
                        <path
                            d="M436.736 654.848c-5.632 0-11.264-1.536-16.384-4.608-9.216-5.632-14.848-15.36-14.848-26.624V399.872c0-10.752 5.632-20.48 14.848-26.624 9.216-5.632 20.48-6.144 30.208-1.536l224.256 112.128c10.752 5.12 17.408 15.872 17.408 27.648s-6.656 22.528-17.408 27.648l-224.256 112.64c-4.608 2.048-9.216 3.072-13.824 3.072z m10.24-238.08v190.464l190.464-95.232-190.464-95.232z"
                            p-id="7839" fill="#707070"></path>
                    </svg>
                    <svg @click="nextframe" t="1594807229282" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="1805" width="32" height="32">
                        <path
                            d="M62.5 512.6c0-247.1 201-448.1 448.1-448.1s448.1 201 448.1 448.1-201 448.1-448.1 448.1-448.1-201-448.1-448.1z m51 0c0 219 178.1 397.1 397.1 397.1s397.1-178.1 397.1-397.1-178.1-397.1-397-397.1-397.2 178.1-397.2 397.1z"
                            fill="#707070" p-id="1806" data-spm-anchor-id="a313x.7781069.0.i11" class="selected"></path>
                        <path
                            d="M532.5 530c6.6 0 13.2-2.6 18.2-7.7 9.9-10.1 9.7-26.2-0.4-36.1L411.3 350c-10-9.9-26.2-9.7-36.1 0.4-9.9 10.1-9.7 26.2 0.4 36.1l139.1 136.3c4.9 4.8 11.4 7.2 17.8 7.2z"
                            fill="#D8BA3D" p-id="1807"></path>
                        <path
                            d="M397.6 669.1c6.7 0 13.3-2.6 18.3-7.7l134.9-139.1c9.8-10.1 9.6-26.3-0.5-36.1s-26.3-9.6-36.1 0.5L379.3 625.9c-9.8 10.1-9.6 26.3 0.5 36.1 5 4.7 11.4 7.1 17.8 7.1zM621 667.7c14.1 0 25.5-11.4 25.5-25.5V369.6c0-14.1-11.4-25.5-25.5-25.5s-25.5 11.4-25.5 25.5v272.6c0 14.1 11.4 25.5 25.5 25.5z"
                            fill="#D8BA3D" p-id="1808"></path>
                    </svg>
                </div>
                <div style="position: absolute;left: 250px;top: 0;bottom: 0;right: 0;">
                    <svg id="floatline" :style="'left:'+(currenplayanframe/currentFrames.length*100)+'%;'"
                        t="1594871788400" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="4501" width="60">
                        <path
                            d="M715.360281 708.161687c-15.297012-31.993751-36.892794-64.387424-64.287444-96.081234-48.990432-56.788908-104.179652-97.480961-125.575473-112.278071-3.999219-2.799453-8.798282-4.19918-13.497364-4.19918-4.699082 0-9.498145 1.399727-13.497364 4.19918-21.395821 14.79711-76.685022 55.489162-125.575473 112.278071-27.394649 31.79379-48.990432 64.087483-64.287444 96.081234C290.143331 746.85413 280.845147 785.646553 280.845147 823.239211c0 27.194689 6.498731 54.089436 18.89631 78.384691 11.997657 23.895333 29.094318 45.291154 50.690099 63.787541 21.795743 18.496387 46.690881 32.993556 73.585628 42.891623 28.194493 10.397969 57.788713 15.696934 87.782855 15.696934h0.099981c30.094122 0 59.588362-5.298965 87.882835-15.696934 26.894747-9.898067 51.889865-24.395235 73.585628-42.891623 21.695763-18.496387 38.792423-39.992189 50.690099-63.787541 12.497559-24.995118 18.896309-51.389963 18.89631-78.384691 0.199961-37.692638-9.098223-76.385081-27.594611-115.077524zM536.795157 0.199961h-49.590314v495.303261h49.590314z"
                            p-id="4502" fill="#1296db"></path>
                    </svg>
                    <div class="row-around-center" style="height: 100%; width: 100%;position: absolute;left: 0;top: 0;">
                        <div class="row-center-center" v-for="(item,index) in currentFrames"
                            :style="'width:'+procewidth+'%;height:100%;'" @click="locationframe(index)">
                            <svg t="1594811311405" class="icon" viewBox="0 0 1024 1024" p-id="2907" width="20"
                                height="20">
                                <path d="M512 320a192.064 192.064 0 0 1 0 384 192 192 0 0 1 0-384z" fill="#ffcc66"
                                    p-id="2908">
                                </path>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        CefSharp.BindObjectAsync('MyMethd');
    </script>
    <script>
        var buildxmlDoc;
        var copryFile = {};
        var timeid;
        var setpointdowns = false;
        var currtime = new Date().getTime();
        var colorselect = false;
        var colorpanlisdown = false;
        var coloraphadown = false;
        var gloabx = 0;
        var gloaby = 0;
        var cnm = new ImageItem();
        var otherImages = {};
        var centerDownpoint = { x: 0, y: 0, isdown: false, povit_x: 0, povit_y: 0 };
        cnm.src = "source/img/unload.png";

        var selectcolor = {
            r: 255, g: 0, b: 0, a: 0.5, x: 0, y: 1, getcolor: function () {
                let r = this.r * this.y;
                let g = this.g * this.y;
                let b = this.b * this.y;

                r = r + this.x * (255 - r);
                g = g + this.x * (255 - g);
                b = b + this.x * (255 - b);
                return 'rgba(' + r + ',' + g + ',' + b + ',' + this.a + ')';
            },
            setcolor: function () {
                app.backgroundColor = this.getcolor();
            }
        }
        function ImageItem() {
            this.name = "名称读取失败";
            this.framenum = "0";
            this.duration = "1";
            this.width = "0";
            this.height = "0";
            this.povit_x = "0";
            this.povit_y = "0";
            this.povit_xx = "0";
            this.povit_yy = "0";
            this.Initializationpovit_x = "";
            this.Initializationpovit_y = "";
            this.xml = null;
            this.src = "";
            this.active = false;
            this.activepoint = false;
        }

        function Files() {
            this.isbible = false;
            this.Sysbol = null;
            this.name = "名称读取失败";
            this.images = [];
        }

        function Element() {
            this.name = "noname";
            this.layername = "noname";
            this.frame = "0";
            this.z_index = "1";
            this.m_a = "1.0";
            this.m_b = "0";
            this.m_c = "0";
            this.m_d = "1.0";
            this.m_tx = "0.0";
            this.m_ty = "0.0";
            this.src = "";
            this.active = false;
        }

        function FramesIeam() {
            this.element = [];
        }

        function Animation() {
            this.active = false;
            this.anim = null;
            this.name = "未命名动画";
            this.root = "???";
            this.numframes = "1000";
            this.framerate = "40";
            this.frames = [];
        }

        var app = new Vue({
            el: "#app",
            data: {
                title: "卧槽",
                filelist: [],
                anlist: [],
                currentAnimation: new Animation(),
                currentFrames: [],
                currentFrame: new FramesIeam(),
                curreElenmets: [],
                curreElenmet: new Element(),
                procewidth: 1,
                isPlay: false,
                currenplayanframe: 0,
                curreImageItem: cnm,
                fps: 30,
                currfps: 0,
                canusemove: false,
                backgroundColor: '#84848470',
                error: '',
                showAllPoint: false,
                showUnloadPicture: false,
                colorlist: ['#000000', '#ffffff', '#00000080', '#ffffff80', 'rgba(255,0,0,0.5)', 'rgba(0,255,0,0.5)', 'rgba(0,0,255,0.5)', '#ffc10794']
            },
            methods:
            {
                selectAn: function (index) {
                    this.anlist.forEach(element => {
                        element.active = false;
                    });
                    this.anlist[index].active = true;
                    this.currentAnimation = this.anlist[index];
                    this.currentFrames = this.currentAnimation.frames;
                    this.currentFrame = this.currentAnimation.frames[0];
                    this.curreElenmets = this.currentFrame.element;
                    this.canusemove = false;
                    buildproces();
                },
                play: function () {
                    if (this.isPlay) {
                        window.clearInterval(timeid);
                    } else {
                        this.currenplayanframe = 0;
                        timeid = window.setInterval(playan, 1000 / this.fps);
                    }
                    this.isPlay = !this.isPlay;
                    this.canusemove = false;
                    this.curreElenmet.active = false;
                },
                locationframe: function (index) {
                    app.currenplayanframe = index;
                    app.currentFrame = app.currentAnimation.frames[app.currenplayanframe];
                    app.curreElenmets = app.currentFrame.element;
                    this.canusemove = false;
                },
                lastframe: function () {
                    app.currenplayanframe--;
                    app.currentFrame = app.currentAnimation.frames[app.currenplayanframe];
                    app.curreElenmets = app.currentFrame.element;
                    this.canusemove = false;
                },
                nextframe: function () {
                    app.currenplayanframe++;
                    app.currentFrame = app.currentAnimation.frames[app.currenplayanframe];
                    app.curreElenmets = app.currentFrame.element;
                    this.canusemove = false;
                },
                listimagehoverin: function (src) {
                    var p = $('#priviewimage');
                    p.css('z-index', 9999)
                    p.attr('src', src);
                },
                listimagehoverout: function () {
                    $('#priviewimage').css('z-index', -1);
                },
                selectimagefile: function (file) {
                    this.filelist.forEach(file => {
                        file.images.forEach(image => {
                            image.active ? image.active = false : 1;
                            image.activepoint ? image.activepoint = false : 1;
                        })
                    });
                    file.active = true;
                    file.activepoint = true;
                    this.curreImageItem = file;
                },
                selectprecolor: function (color) {
                    this.backgroundColor = color;
                },
                selectElement: function (item) {
                    for (iterator of this.curreElenmets) {
                        iterator.active ? (iterator.active = false) : 1;
                    }
                    item.active = true;
                    this.curreElenmet = item;
                    this.canusemove = true;
                    this.curreImageItem.active = false;
                }
            }
        })
    </script>
    <script>
        $('#fpsid').bind('input propertychange', function () {
            app.fps = $('#fpsid').val();
            if (app.isPlay) {
                window.clearInterval(timeid);
                timeid = window.setInterval(playan, 1000 / app.fps);
            }
        })
        $('#inputx').bind('input propertychange', function () {
            console.log('change');
            setOffsetPoint($('#inputx').val(), $('#inputy').val());
        })

        $('#inputy').bind('input propertychange', function () {
            setOffsetPoint($('#inputx').val(), $('#inputy').val());
        })
        function buildfile(xml) {
            var parser = new DOMParser();
            buildxmlDoc = parser.parseFromString(xml, "text/xml");
            var Build = buildxmlDoc.getElementsByTagName("Build")[0];
            var Symbols = Build.getElementsByTagName("Symbol");
            for (var i = 0; i < Symbols.length; i++) {
                var file = new Files();
                var Sysbol = Symbols[i];
                file.Sysbol = Sysbol;
                file.name = Sysbol.getAttribute("name");
                var Frames = Sysbol.getElementsByTagName("Frame");
                for (var j = 0; j < Frames.length; j++) {
                    var Frame = Frames[j];
                    var image = new ImageItem();
                    image.name = Frame.getAttribute("image");
                    image.framenum = Frame.getAttribute("framenum");
                    image.duration = Frame.getAttribute("duration");
                    image.width = Frame.getAttribute("w");
                    image.height = Frame.getAttribute("h");
                    image.povit_x = Frame.getAttribute("x");
                    image.povit_y = Frame.getAttribute("y");
                    image.povit_xx = (image.width / 2 - parseFloat(Frame.getAttribute("x")));
                    image.povit_yy = (image.height / 2 - parseFloat(Frame.getAttribute("y")));
                    image.Initializationpovit_x = Frame.getAttribute("x");
                    image.Initializationpovit_y = Frame.getAttribute("y");
                    image.xml = Frame;

                    image.src = image.name + ".png"
                    file.images.push(image);
                }
                app.filelist.push(file);
                copryFile[file.name] = file;
            }
        }

        function buildan(xml) {
            var parser = new DOMParser();
            var xmlDoc = parser.parseFromString(xml, "text/xml");
            var Anims = xmlDoc.getElementsByTagName("Anims")[0];
            var anims = Anims.getElementsByTagName("anim");
            for (var i = 0; i < anims.length; i++) {
                var anim = anims[i];
                var animss = new Animation();
                //animss.anim = anim;//暂时不用
                animss.name = anim.getAttribute("name");
                animss.root = anim.getAttribute("root");
                animss.numframes = anim.getAttribute("numframes");
                animss.framerate = anim.getAttribute("framerate");
                var frames = anim.getElementsByTagName("frame");
                for (var j = 0; j < frames.length; j++) {
                    var frame = frames[j];
                    var frameitem = new FramesIeam();
                    var elements = frame.getElementsByTagName("element");
                    for (z = 0; z < elements.length; z++) {
                        var element = elements[z];
                        var elementitem = new Element();

                        elementitem.name = element.getAttribute("name");
                        elementitem.layername = element.getAttribute("layername");
                        elementitem.frame = element.getAttribute("frame");
                        elementitem.z_index = 1000 - element.getAttribute("z_index");
                        elementitem.m_a = element.getAttribute("m_a");
                        elementitem.m_b = element.getAttribute("m_b");
                        elementitem.m_c = element.getAttribute("m_c");
                        elementitem.m_d = element.getAttribute("m_d");
                        elementitem.m_tx = element.getAttribute("m_tx");
                        elementitem.m_ty = element.getAttribute("m_ty");
                        if (copryFile[elementitem.name] != null) {
                            elementitem.image = copryFile[elementitem.name].images[elementitem.frame];
                            if (elementitem.image == null) {
                                let imagename = elementitem.name + elementitem.frame;
                                if (otherImages[imagename] != null) {
                                    elementitem.image = otherImages[imagename];
                                } else {
                                    otherImages[imagename] = new ImageItem();
                                    otherImages[imagename].name = elementitem.name + '-' + elementitem.frame;
                                    elementitem.image = otherImages[imagename];
                                    console.log("警告，不完整的build.xml");
                                    console.log(elementitem);
                                }
                            }
                        }
                        else {
                            let imagename = elementitem.name + elementitem.frame;
                            if (otherImages[imagename] != null) {
                                elementitem.image = otherImages[imagename];
                            } else {
                                otherImages[imagename] = new ImageItem();
                                otherImages[imagename].name = elementitem.name + '-' + elementitem.frame;
                                elementitem.image = otherImages[imagename];
                            }
                        }

                        frameitem.element.push(elementitem);
                    }
                    animss.frames.push(frameitem);
                }
                app.anlist.push(animss);
            }
        }

        function buildproces() {
            app.procewidth = 100 / app.currentAnimation.frames.length;
        }
        var fpss = 0;
        function playan() {
            fpss++;
            if ((new Date().getTime() - currtime) > 1000) {
                currtime = new Date().getTime();
                app.currfps = fpss;
                fpss = 0;
            }
            app.currentFrame = app.currentAnimation.frames[app.currenplayanframe];
            app.curreElenmets = app.currentFrame.element;
            app.currenplayanframe++;
            if (app.currenplayanframe == app.currentFrames.length) app.currenplayanframe = 0;
        }

        function buildcolor(r, g, b) {
            let color = 'rgb(' + r + ',' + g + ',' + b + ')';
            $('#colorpanl').css('background', color);
            $('#aphapanl').css('background', 'linear-gradient(to top, rgba(255, 0, 225, 0) 0%, ' + color + ' 100%)');
            selectcolor.r = r;
            selectcolor.g = g;
            selectcolor.b = b;
            selectcolor.setcolor();
        }

        function setcolor(offsetY) {
            $('#clolrselect').css('top', offsetY);
            let ybit = offsetY / 170;
            let r = 0;
            let g = 0;
            let b = 0;
            if (ybit < 0.166666) {
                r = 255;
                g = 1530 * ybit;
                b = 0;
                buildcolor(r, g, b)
                return;
            }
            if (ybit < 0.323333) {
                r = 500 - 1530 * ybit;
                g = 255;
                b = 0;
                buildcolor(r, g, b);
                return;
            }
            if (ybit < 0.5) {
                r = 0;
                g = 255;
                b = 1530 * ybit - 510;
                buildcolor(r, g, b);
                return;
            }
            if (ybit < 0.666666) {
                r = 0;
                g = 1010 - 1530 * ybit;
                b = 255;
                buildcolor(r, g, b);
                return;
            }
            if (ybit < 0.833333) {
                r = 1530 * ybit - 1020;
                g = 255;
                b = 0;
                buildcolor(r, b, g);
                return;
            }
            if (ybit < 1) {
                r = 255;
                g = 0;
                b = 1530 - 1530 * ybit;
                buildcolor(r, g, b);
                return;
            }
        }

        function gloabmove(event) {
            let y = event.clientY - gloaby;
            if (colorselect) {
                setcolor(y);
            }
            if (coloraphadown) {
                $('#aphacontrl').css('top', y + "px");
                selectcolor.a = 1 - y / 170;
                selectcolor.setcolor();
            }
        }

        function colorcontrldown(el) {
            console.log(el);
            colorselect = true;
            var t = el.offsetTop;
            while (el = el.offsetParent) {
                t += el.offsetTop;
            }
            gloaby = t;
            offsetY = window.event.offsetY;
            setcolor(offsetY);
        }

        function gloabdown() {

        }

        function gloabup() {
            colorselect = false;
            colorpanlisdown = false;
            coloraphadown = false;
        }

        function colorpanldown(event) {
            colorpanlisdown = true;
            $('#colorpanlpoint').css('top', event.offsetY);
            $('#colorpanlpoint').css('left', event.offsetX);
            selectcolor.x = 1 - event.offsetX / 250;
            selectcolor.y = 1 - event.offsetY / 170;
            selectcolor.setcolor();
        }

        function colorpanlmove(event) {
            if (colorpanlisdown) {
                $('#colorpanlpoint').css('top', event.offsetY);
                $('#colorpanlpoint').css('left', event.offsetX);
                selectcolor.x = 1 - event.offsetX / 250;
                selectcolor.y = 1 - event.offsetY / 170;
                selectcolor.setcolor();
            }
        }

        function colorpanlup() {
            colorpanlisdown = false;
        }

        function coloraphadownfn(el) {
            coloraphadown = true;
            var t = el.offsetTop;
            while (el = el.offsetParent) {
                t += el.offsetTop;
            }
            gloaby = t;
            offsetY = window.event.offsetY;
            $('#aphacontrl').css('top', offsetY + "px");
            selectcolor.a = 1 - offsetY / 170;
            selectcolor.setcolor();
        }

        function setOffsetPoint(x, y) {
            if (app.curreImageItem.xml) {
                app.curreImageItem.povit_x = x;
                app.curreImageItem.povit_y = y;
                app.curreImageItem.povit_xx = app.curreImageItem.width / 2 - parseFloat(app.curreImageItem.povit_x);
                app.curreImageItem.povit_yy = app.curreImageItem.height / 2 - parseFloat(app.curreImageItem.povit_y);
                app.curreImageItem.xml.setAttribute('x', x);
                app.curreImageItem.xml.setAttribute('y', y);
            }
        }

        function publicoffset(x, y) {
            let povit_x;
            let povit_y;
            if (parseInt(app.curreImageItem.width) > app.curreImageItem.height) {
                povit_x = parseFloat(app.curreImageItem.width) * x / 225;
                povit_y = parseFloat(app.curreImageItem.width) * y / 225;
            } else {
                povit_x = parseFloat(app.curreImageItem.height) * x / 225;
                povit_y = parseFloat(app.curreImageItem.height) * y / 225;
            }
            setOffsetPoint(povit_x, povit_y);
        }
        function offsetfn(event) {
            setpointdowns = true;
            let x = 112.5 - event.offsetX;
            let y = 112.5 - event.offsetY;
            publicoffset(x, y);
        }

        function offsetmovefu(event) {
            if (setpointdowns) {
                let x = 112.5 - event.offsetX;
                let y = 112.5 - event.offsetY;
                publicoffset(x, y);
            }
        }

        function centerdown(event) {
            centerDownpoint.x = event.offsetX;
            centerDownpoint.y = event.offsetY;
            centerDownpoint.isdown = true;
            if (app.curreElenmet.image) {
                centerDownpoint.povit_x = parseFloat(app.curreElenmet.image.povit_x);
                centerDownpoint.povit_y = parseFloat(app.curreElenmet.image.povit_y);
            }
        }

        function centermove(event) {
            if (centerDownpoint.isdown) {
                if (app.canusemove) {
                    let offx = event.offsetX - centerDownpoint.x;
                    let offy = event.offsetY - centerDownpoint.y;
                    app.curreElenmet.image.povit_x = centerDownpoint.povit_x + offx;
                    app.curreElenmet.image.povit_y = centerDownpoint.povit_y + offy;
                    app.curreElenmet.image.povit_xx = app.curreElenmet.image.width / 2 - parseFloat(app.curreElenmet.image.povit_x);
                    app.curreElenmet.image.povit_yy = app.curreElenmet.image.height / 2 - parseFloat(app.curreElenmet.image.povit_y);
                    app.curreElenmet.image.xml.setAttribute('x', app.curreElenmet.image.povit_x);
                    app.curreElenmet.image.xml.setAttribute('y', app.curreElenmet.image.povit_y);
                }
                else {
                    app.error = '请从右边图片列表选中一张图片再移动';
                }
            }
        }

        function onmousescoll(event) {
            var ancon = $('#ancontorl');
            var zoom = ancon.css('zoom');
            if (event.deltaY > 0) {
                ancon.css('zoom', parseFloat(zoom) - 0.05);
            } else {

                ancon.css('zoom', parseFloat(zoom) + 0.05);
            }
            console.log(zoom);
        }

        function restorepovitx() {
            setOffsetPoint(app.curreImageItem.Initializationpovit_x, $('#inputy').val());
        }

        function restorepovity() {
            setOffsetPoint($('#inputx').val(), app.curreImageItem.Initializationpovit_y);
        }
        function resotrallpoint() {
            setOffsetPoint(app.curreImageItem.Initializationpovit_x, app.curreImageItem.Initializationpovit_y);
        }

        function showAllPointfn() {
            app.showAllPoint = !app.showAllPoint;
        }

        function showUnloadPicture() {
            app.showUnloadPicture = !app.showUnloadPicture;
        }


        //-------------------------------------------------------------
        // c#调用JavaScript
        function showerror(error) {
            console.log(error);
            app.error = error;
        }

        function replacepicture(name, width, height) {
            for (iterator of app.filelist) {
                for (iterator2 of iterator.images) {
                    if (iterator2.name == name) {
                        iterator2.width = width;
                        iterator2.height = height;
                        iterator2.povit_xx = (width / 2 - parseFloat(iterator2.povit_x));
                        iterator2.povit_yy = (height / 2 - parseFloat(iterator2.povit_y));

                        iterator2.xml.setAttribute('w', width);
                        iterator2.xml.setAttribute('h', height);
                        var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';    /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
                        var maxPos = $chars.length;
                        var pwd = '';
                        for (i = 0; i < 4; i++) {
                            pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
                        }
                        iterator2.src = iterator2.src.split('?')[0] + '?reload=' + pwd;
                        savebuild();
                    }
                }
            }
        }

        function loadothrXml(xml) {
            buildan(xml);
            $("#anlist").animate({ scrollTop: ($("#anlist")[0].scrollHeight + 100) - $("#anlist").height() }, 500);
            $('#loading').hide();
        }
        //-------------------------------------------------------------


        //-------------------------------------------------------------
        // javascript调用c#
        function showInFileMarnerge() {
            MyMethd.showInFileMarnerge();
        }

        function openThisPng() {
            if (app.curreImageItem.name == "名称读取失败") {
                showerror("从左边图片列表选中一张图片再操作");
            } else {
                MyMethd.openThisPng(app.curreImageItem.name);
            }

        }

        function replaceCurrentPicture() {
            if (app.curreImageItem.name == "名称读取失败") {
                showerror("从左边图片列表选中一张图片再操作");
            } else {
                MyMethd.replaceCurrentPicture(app.curreImageItem.name);
            }
        }

        function reloadCurrentPicture() {
            if (app.curreImageItem.name == "名称读取失败") {
                showerror("从左边图片列表选中一张图片再操作");
            } else {
                MyMethd.reloadCurrentPicture(app.curreImageItem.name);
            }
        }

        function savebuild() {
            $('#loading').show();
            var data = new XMLSerializer().serializeToString(buildxmlDoc);
            MyMethd.savebuild(data);
        }

        function loadBuiltinAn() {
            $('#loading').show();
            MyMethd.loadBuiltinAn();
        }

        function loadExternalAn() {
            $('#loading').show();
            MyMethd.loadExternalAn();
        }

        function compilation() {
            MyMethd.compilation();
        }
        //-------------------------------------------------------------
    </script>
    <script>
        /*$.ajax({
            url: "animation.xml", async: true, success: function (data) {
                buildan(data);
            }
        });*/
       //$.get('animation.xml', function (data) { buildan(data); })
    </script>
</body>

</html>